<template>
	<view class="fzbig">
		<view class="fztit fzbox">
			<view @click="showModal"  data-target="DialogModal1">+添加分组</view>
		</view>
		<view class="fzlist">
			<view v-for="(item,index) in fenzulist" :key="item.groupId">
			<view class="fzbox">
				<view class="box1">
					<view class="cuIcon-title colorgr"></view>
					<view>{{item.groupName}}</view>
				</view>
				<view style="color: #ED1C24;" @click="rem(item.groupId)">删除</view>
			</view>
		</view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">添加分组</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<uni-forms-item label="分组名" name="phone">
						<uni-easyinput type="text" v-model="add.groupName" placeholder="请输入分组名" />
					</uni-forms-item>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
						<button class="cu-btn bg-blue margin-left" @tap="addfz">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {groupList,addgroup,remgroup} from "../../utils/fenzu.js"
	export default {
		data() {
			return {
				modalName: null,
				fenzulist:[],
				add:{
					groupName:'',
					memberId:this.$store.state.user.id
				}
			}
		},
		onShow() {
			this.fenzu()
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//删除分组
			rem(fzid){
				const obj = {
					userId:this.$store.state.user.id,
					groupId:fzid
				}
				uni.showModal({
					confirmColor:'#ED1C24',
					title:'确认删除',
					success: async (rem) => {
						if(rem.confirm){
							const {data:res} = await remgroup(obj)
						}
						this.fenzu()
					}
				})
			},
			//新增分组
			async addfz(){
				const {data:res} = await addgroup(this.add) 
				console.log(res.data)
				this.fenzu()
				this.modalName = null
			},
			async fenzu(){
				let id = this.$store.state.user.id
				console.log(id)
				if(id){
					const {data:res} = await groupList(id)
					console.log(res.data)
					this.fenzulist = res.data
				}else{
					this.fenzulist = []
				}
				
			},
		}
	}
</script>

<style scoped>
	.fzbig{
		border-radius: 5px;
		background-color: #FFFFFF;
		overflow: hidden;
		margin: 0px 15px;
		margin-top: 10px;
	}
	.box1{
		display: flex;
		align-items: center;
	}
	.fzbox{
		background-color: #FFFFFF;
		padding: 10px 0;
		display: flex;
		justify-content: space-between;
	}
	.fztit{
		padding:10px;
		justify-content: flex-end;
		color: #23B48D;
	}
	.padding-xl{
		background-color: #fff;
	}
	.fzlist{
		overflow: hidden;
		margin: 0px 15px;
		
	}
	.colorgr{
		color: #23B48D;
		margin-right: 5px;
	}
	.line-blue{
		border: 1px solid #f4f4f4;
	}
	.text-blue{
		color: #23B48D;
	}
	.bg-blue{
		background-color: #23B48D;
	}
</style>
